<template>
    <div>
        <el-card shadow="hover" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <!--<i class="box-title-icon fontColor" :class="noticeContent.icon"></i>-->
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleNoticeClick" v-if="showTemplate">
                        <el-tab-pane :label="noticeContent.noticeName" name="通知公告">
                            <div class="tabs-content-box">
                                <el-table :data="noticeList" :show-header="false" style="width: 100%;font-size:14px;">
                                    <el-table-column width="40">
                                        <template slot-scope="scope">
                                            <div class="notice-tag" v-bind:class="'notice-tag-'+(scope.$index+1)"><i class="iconfont icon-tongzhifawen_A"></i></div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-item">
                                                <a href="#" title="" @click="openMenuFunction(scope.row)">{{scope.row.name}}</a>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="102">
                                        <template slot-scope="scope">
                                            <div class="todo-date">{{scope.row.publishTime}}</div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane :label="noticeContent.regulationsName" name="财政财务制度">
                            <div class="tabs-content-box">
                                <el-table :data="Regulations" :show-header="false" style="width: 100%;font-size:14px;">
                                    <el-table-column width="40">
                                        <template slot-scope="scope">
                                            <div class="notice-tag" v-bind:class="'notice-tag-'+(scope.$index+1)"><i class="iconfont icon-tongzhifawen_A"></i></div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <div class="todo-item">
                                                <a href="#" title="" @click="openRegulationsMenuFunction(scope.row)">{{scope.row.name}}</a>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="102">
                                        <template slot-scope="scope">
                                            <div class="todo-date">{{scope.row.publishTime}}</div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
                <el-button class="btn-more" type="text" >
                    <a title="" href="javascript:void(0);" @click="handleNoticeMore" class="fontColor">更多>></a>
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
import bus from '../../common/bus';
import { noticeContent } from './data/Content.js';
import appUtil from '~/assets/utils/appUtil.js';
const { mapState } = createNamespacedHelpers('homeModule');
// import articleMore from '../../../morePage/ArticleMore.vue';
export default {
    name: 'NoticeList',
    data () {
        return {
            activeName: '通知公告',
            noticeContent: noticeContent,
            //noticeList: require("./data/NoticeList.json"),
            //Regulations: require("./data/Regulations.json"),
            noticeList:[],
            Regulations:[],
            config:[],
            configRegulations:[],
            articleDetail:'./articleDetail.html',
            showTemplate:false
        };
    },
    created:function (){
        this.getNoticeList();
        this.getRegulations();
    },
    computed:{
        ...mapState(['userDetail']),

    }, 
    methods: {
        getNoticeList(){
            this.$axios.get(noticeContent.noticeUrl).then(res => {
                this.getList(res.data[0]);
                this.config = res.data[0];
                // this.noticeList = res.data;
                this.showTemplate = true;
            });
        },
        // 获取列表数据
        getList(param){
            let data = {
                // typeId:param.typeId,
                categoryId:param.categoryId ? param.categoryId : '',
                userId:appUtil.getSes('userId'),
                deptCodes:this.userDetail.deptId ||'',
                roleIds:this.userDetail.roles[0].roleId ||'',
                agcyCodes:this.userDetail.agencyId || '',
                divCodes:this.userDetail.mofDivId || '',
                status:'1',
                ps:10,
                pn:1,
                frontId:'1' //需要通过失效时间过滤
            };
            console.log(data);
            console.log(this.userDetail);
            this.$axios.get('/ptp-cms/cmscontent/getContentByOne',{params:data})
                .then(res => {
                    if(res.data.code === -1){
                        return;
                    }
                    this.noticeList = res.data.data.dataList;
                    //this.getNoReadCount();
                    // if(res.data.data.dataList.length>0){
                    //     this.config[param.index].noReadCount = res.data.data.dataList[0].noReadCount;
                    //     this.config[param.index].hidden = res.data.data.dataList[0].noReadCount==='0'?true:false;
                    // }
                    
                });
        },
        getRegulations(){
            this.$axios.get(noticeContent.regulationsUrl).then(res => {
                this.getRegulationsList(res.data[0]);
                this.configRegulations = res.data[0];
                this.showTemplate = true;
            });
        },
        // 获取财政财务制度列表数据
        getRegulationsList(param){
            let data = {
                // typeId:param.typeId,
                categoryId:param.categoryId ? param.categoryId : '',
                userId:appUtil.getSes('userId'),
                deptCodes:this.userDetail.deptId ||'',
                roleIds:this.userDetail.roles[0].roleId ||'',
                agcyCodes:this.userDetail.agencyId || '',
                divCodes:this.userDetail.mofDivId || '',
                status:'1',
                ps:10,
                pn:1,
                frontId:'1' //需要通过失效时间过滤
            };
            this.$axios.get('/ptp-cms/cmscontent/getContentByOne',{params:data})
                .then(res => {
                    if(res.data.code === -1){
                        return;
                    }
                   
                    this.Regulations = res.data.data.dataList;
                    //this.getNoReadCount();
                    // if(res.data.data.dataList.length>0){
                    //     this.config[param.index].noReadCount = res.data.data.dataList[0].noReadCount;
                    //     this.config[param.index].hidden = res.data.data.dataList[0].noReadCount==='0'?true:false;
                    // }
                    
                });
        },
        // 打开详情页面
        openMenuFunction(item){
            let url = this.articleDetail+'?typeId=' + item.typeId + '&articleId='+ item.id;
            // window.open(url, '_blank');
            let menu = {
                url:url,
                name:this.config.name,
                isNew:false // 是否在新页面打开
            };     
            bus.$emit('openMenu',menu);
        },
        // 打开详情页面
        openRegulationsMenuFunction(item){
            let url = this.articleDetail+'?typeId=' + item.typeId + '&articleId='+ item.id;
            // window.open(url, '_blank');
            let menu = {
                url:url,
                name:this.configRegulations.name,
                isNew:false // 是否在新页面打开
            };     
            bus.$emit('openMenu',menu);
        },
        handleNoticeClick(tab, event) {
            console.log(tab, event);
        },
        handleNoticeMore(){
            let routeData = this.$router.resolve({
                path: '/ArticleMore',
            });
            let menu_url = '';
            if(this.activeName ==='通知公告'){
                menu_url=window.location.href.split('#')[0]+routeData.href+'?typeId=' + this.config.typeId + '&categoryId=3367729595877051407&name='+ this.config.name;
            }else{
                menu_url=window.location.href.split('#')[0]+routeData.href+'?typeId=' + this.configRegulations.typeId + '&categoryId=3398894718118156016&name='+ this.configRegulations.name; 
            }
            let menu = {
                url:menu_url,
                name:this.activeName,
                isNew:false // 是否在新页面打开
            };
            bus.$emit('openMenu',menu);
        }
    }
};
</script>

<style lang="scss" scoped>
.fontColor{
    color:#888!important;
}
.el-tabs__nav-wrap {
    padding-left: 24px;
}
.notice-tag{
    color:#a7a7a7;
}
.notice-tag-1,.notice-tag-2{
    color:#2d8cf0;
}
</style>